<template>
  <div class="app-container">
    <basic-container>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button icon="el-icon-arrow-left" type="primary" @click="back()">返回</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-plus" type="primary" @click="viewHandleEcharts()">分析</el-button>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading">
<!--          <el-table-column-->
<!--              prop="courseName"-->
<!--              header-align="center"-->
<!--              align="center"-->
<!--              label="课程名称">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="examName"
              header-align="center"
              align="center"
              label="考试名称">
          </el-table-column>
          <el-table-column
              prop="nickname"
              header-align="center"
              align="center"
              label="考生">
          </el-table-column>
          <el-table-column
              prop="score"
              header-align="center"
              align="center"
              label="考试分数">
          </el-table-column>
          <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              label="交卷时间">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">查看
              </el-button>
              <el-button type="text" size="small" icon="el-icon-edit" @click="deleteHandle(scope.row.id)">打回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <el-dialog
          title="考试结果"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose">
        <div style="margin-bottom: 30px">
          <span style="font-size: 16px; display: inline-block; margin-right: 25px">最高分：{{max}}</span>
          <span style="font-size: 16px; display: inline-block; margin-right: 25px">最低分：{{min}}</span>
          <span>平均分：{{avg}}</span>
        </div>
        <div ref="echartsContainer" style="width: 600px; height: 400px;"></div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </basic-container>
  </div>
</template>

<script>
import {fetchTeacherList, delObj, fetchEcharts} from '@/api/student/examstudent'
import TableForm from './examstudent-form'
import * as echarts from 'echarts';

export default {
  data() {
    return {
      max: 0,
      min: 0,
      avg: 0,
      dialogVisible: false,
      myChart: null,
      like: '',
      dataForm: {
        examId: ''
      },
      searchForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    TableForm
  },
  mounted() {
  },
  created() {
    this.dataForm.examId = this.$route.query.id
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchTeacherList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.records
        this.totalPage = response.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    viewHandleEcharts() {
      this.dialogVisible = true
      fetchEcharts({examId: this.$route.query.id}).then(response => {
        this.max = response.data.max
        this.min = response.data.min
        this.avg = response.data.avg
        const arrScore = []
        const arrName = []
        response.data.list.forEach(item=>{
          arrScore.push(item.score)
          arrName.push(item.name)
        })
        this.$nextTick(()=>{
          this.showEcharts(arrScore, arrName)
        }, 300)
      })
    },
    back(){
      window.history.go(-1)
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.$router.push({name: 'studentExamOnLine', params: {id: id}})
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //  导出excel
    handleClose() {
      this.dialogVisible = false
    },
    showEcharts(arrScore, arrName){
      var myChart = echarts.init(this.$refs.echartsContainer);
      myChart.setOption({
        title: {
          text: '成绩排行榜'
        },
        tooltip: {},
        xAxis: {
          data: arrName
        },
        yAxis: {},
        series: [{
          name: '成绩',
          type: 'bar',
          data: arrScore
        }]
      });
    }
  }
}
</script>
